<!DOCTYPE html>
<html lang="en">
<head>
    <title>商品详情</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/goodsDecribedindex.css" />
    <link rel="stylesheet" href="/css/myProfiles.css" />
    <link rel="stylesheet" href="/css/goods.css" />
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            // 获取用户id
            var user = JSON.parse(sessionStorage.getItem("user"));
            // $(".info").renderValues(user);

            // 获取商品id
            var id = getParams().id;

            // 发送ajax请求，查询单个商品
            $.get("/products/"+id,function (data) {
                console.log(data);
                $(".pro").renderValues(data);
                // 存商品相关信息进入session
                var product = {
                    name : data.name,
                    coverUrl : data.coverUrl,
                    price : data.price,
                };
                sessionStorage.setItem('products', JSON.stringify(product));
            });
        });


        // 点击"+" ，增加购买数量
        function add() {
            var num = parseInt($("#goodsNum").val()) || 0;
            ifNum(num);
            $("#goodsNum").val(num + 1);
        };

        // 点击"-" ，减少购买数量
        function sub() {
            var num = parseInt($("#goodsNum").val()) || 0;
            ifNum(num);
            num = num - 1;
            num = num < 1 ? 1 : num;
            $("#goodsNum").val(num);
        };

        // 是否为数字判断
        function ifNum(num) {
            if(num < 1 || !($.isNumeric(num))){
                alert("请输入正确的商品数量");
            }
        };


        // 点击加入购物车
        function submit(){
            // 把coutn存入session
            var con = {
                count:$("#goodsNum").val()
            }
            sessionStorage.setItem('cons', JSON.stringify(con));
        };

    </script>
</head>
<body>
<div class="nav-search">
    <a href="javascript:history.go(-1);">
        <span><i class="fa fa-angle-left fa-2x" ></i></span>
    </a>
</div>
<hr>
<span class="shop-icon">积分商城</span>
<span class="tag-promotion" style="background-image: url(/img/products/1/icon.png); "></span>

<div class="row pro" style="width: 100%; margin: 0 auto;">
    <div style="margin-left: 20px;">
        <div class="thumbnail">
            <img render-src="coverUrl" style=" width:85%;height:85%;"/>
        </div>
        <div class="caption">
            <div class="thumbnail" style="margin-top: 3px;"><img src="/img/products/1/ad.png" style="width: 85%"></div>
            <br>
            <span style="color: #999">商品名称&nbsp;&nbsp; </span><span render-html="name"></span>

            <div class="s-label clearfix">
                <span class="bor">玩转海陆空</span>
                <span class="bor">潜水胜地</span>
                <span class="bor">可指定酒店</span>
                <span class="bor">可配全国联运</span>
            </div>
            <br>
            <span style="color: #999">兑换积分</span>  &nbsp;&nbsp;<span class="bol">¥</span>&nbsp;<span render-html="price" class="bo"></span>
            <br><br>
            <div class="info-promo clearfix">
                <span class="label2">领优惠券</span>
                    <p class="coupon clearfix">
                        <div class="promo-bd">
                            <span class="ct">
                                <span>¥ 20</span>
                            </span>
                            <span class="ct">
                                <span>¥ 30</span>
                            </span>
                            <span class="ct">
                                <span>¥ 50</span>
                            </span>
                            <span class="more" id="ota_coupon_show">
                                共3张可领
                            </span>
                        </div>
                    </p>
            </div>
            <br>
            <span style="color: #999">优惠信息</span>  &nbsp;&nbsp;<span class="shop-icon2"><a>app立减10积分</a></span>
            <br><br><br>
            <span style="color: #999">购买数量</span>  &nbsp;&nbsp;
            <a href="javascript:void(0)" onclick="sub()">-&nbsp; </a>
            <input type="text" id="goodsNum" value="1" style="text-align:center;font-size:8px; width: 30px;height: 25px;">
            <a href="javascript:void(0)" onclick="add()"> &nbsp;+</a>
            <div style="margin-top: 40px;">
                <a href="shop.html" class="btn btn-success" role="button"><span class="glyphicon glyphicon-shopping-cart"></span>继续购物</a>&nbsp;&nbsp;
                <a href="carts.html" class="btn btn-warning submitBtn" role="button" onclick="submit()"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 加入购物车</a>
            </div>
            <hr>
            <span style="color: #999">商品详情：</span><br><br>
            <span render-html="content"></span>
            <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;冲绳县处于日本九州岛和中国台湾省之间，是受美国非法托管行政权的日本的海岛县，以冲绳诸岛为中心，由宫古诸岛、八重山诸岛等岛屿组成，众多小的岛屿沿中国大陆围成一个弧线，土地面积占日本总面积的0.6%左右，在47个都道府县中位于第44位。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;富有特别的自然环境，除了具有东南亚、中国、日本的民俗风情建筑外，较日本本土更具有特别的美式风情，有“日本的夏威夷”之称，是空手道的故乡。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;气候温暖宜人，是亚热带海洋性气候地区。经济以旅游业发达，由于处在太平洋的大陆架上，其附近水域鱼获丰富，渔业为冲绳人多从事的行业。-->
        </div>

    </div>
</div>

</body>
</html>